<template>
  <div class="body-swiper">
    <el-form :model="LoginForm" :rules="rules" ref="LoginForm">
      <h1>登录诊所管理系统</h1>
      <el-form-item prop="username">
        <span class="pic-login">
          <img src="../../../imgs/切图/登录界面/main-icon-01.png" alt="" />
        </span>
        <el-input v-model="LoginForm.username" placeholder="请输入用户名">
        </el-input>
      </el-form-item>
      <p v-text="msg" class="error"></p>
      <el-form-item prop="phone">
        <span class="pic-login">
          <img src="../../../imgs/切图/登录界面/main-icon-02.png" alt="" />
        </span>
        <el-input v-model="LoginForm.phone" placeholder="请输入手机号码">
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <span class="pic-login">
          <img src="../../../imgs/切图/登录界面/main-icon-03.png" alt="" />
        </span>
        <el-input
          v-model="LoginForm.password"
          placeholder="请输入密码"
          type="password"
          @change="submitForm('LoginForm')"
        >
        </el-input>
      </el-form-item>

      <div class="forget-login">
        <el-checkbox v-model="checked">1个月内免登录</el-checkbox>
        <router-link to="/findpwd" style="text-decoration: none"
          ><span>忘记密码</span></router-link
        >
      </div>
      <el-button type="primary" @click="submitForm('LoginForm')"
        >登录</el-button
      >
      <el-button class="shenqing" @click="$router.push('/apply')"
        >申请使用</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { loginApi } from "../../../api/login";
import { setToken, getToken } from "../../../utils/cookieUtils";
export default {
  data() {
    return {
      checked: false,
      msg: "",
      LoginForm: {
        username: "",
        phone: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "change" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
      },
    };
  },

  methods: {
    submitForm(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          loginApi(this.LoginForm).then((res) => {
            if (res.code === 200) {
              // console.log(res);
              setToken("token", res.data);
              this.$router.push("/");
            } else {
              this.msg = res.msg;
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.body-swiper {
  flex: 34%;
  padding: 100px 50px 155px 56px;
  h1 {
    padding: 120px 0 40px 0;
    font-family: "微软雅黑";
    color: #232323;
    font-weight: bold;
    font-size: 1.5rem;
  }
  .pic-login {
    position: absolute;
    top: 6px;
    z-index: 2;
    padding-left: 10px;
  }
  /deep/input {
    color: black;
    padding-left: 40px;
  }
  .error {
    position: relative;
    bottom: 10px;
    font-size: 12px;
    color: red;
    margin-top: 5px;
  }
  .forget-login {
    display: flex;
    justify-content: space-between;
    span {
      color: #a9b0f1;
      font-size: 0.3rem;
      cursor: pointer;
    }
  }
  .el-button {
    width: 100%;
    margin-top: 20px;
    background-color: #666fe7;
    border-color: #666fe7;
  }
  .shenqing {
    display: inline-block;
    background-color: #fff;
    border-color: #fff;
    color: #a9b0f1;
  }
}
</style>
